基础表单：登录注册页面需求分析
登录注册页面是管理后台的门面，也是用户对系统的第一印象。它虽然功能简单，但在设计上有不少细节需要考虑：表单布局、第三方登录集成、语言切换、暗黑模式适配、响应式布局、背景图片处理等。本节先做完整的需求拆解，再逐步实现。
页面结构分析
一个标准的登录注册页面由以下区域组成：
┌──────────────────────────────────────────┐
│ 背景图 │
│ │
│ ┌──────────────────────────────────┐ │
│ │ 右上角工具：语言切换 | 暗黑模式 │ │
│ ├──────────────────────────────────┤ │
│ │ │ │
│ │ ┌────────────────────┐ │ │
│ │ │ Logo / 系统名称 │ │ │
│ │ │ │ │ │
│ │ │ 用户名输入框 │ │ │
│ │ │ 密码输入框 │ │ │
│ │ │ 验证码输入框 │ │ │
│ │ │ 记住密码 | 忘记密码 │ │ │
│ │ │ [登录按钮] │ │ │
│ │ │ │ │ │
│ │ │ 第三方登录 │ │ │
│ │ │ 微信 | 支付宝 | QQ │ │ │
│ │ │ │ │ │
│ │ │ 还没有账号？注册 │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────┘ │
└──────────────────────────────────────────┘
text
功能需求清单
核心功能
| 功能 | 说明 | 优先级 |
|---|---|---|
| 用户名密码登录 | 基础登录表单 | P0 |
| 表单校验 | 必填、格式、长度校验 | P0 |
| 记住密码 | localStorage 存储用户名密码 | P1 |
| 注册切换 | 登录/注册表单切换 | P1 |
增强功能
| 功能 | 说明 | 优先级 |
|---|---|---|
| 第三方登录 | 微信、支付宝、GitHub 等 | P2 |
| 验证码 | 图形验证码或短信验证码 | P2 |
| 语言切换 | 中英文切换 | P2 |
| 暗黑模式 | 跟随系统或手动切换 | P2 |
UI 需求
| 需求 | 说明 |
|---|---|
| 响应式布局 | 移动端表单宽度 100%，桌面端居中卡片 |
| 背景图片 | 可配置的背景图，带半透明遮罩 |
| 表单动画 | 登录/注册切换时的过渡动画 |
| 隐藏菜单 | 登录页不显示后台菜单和头部 |
隐藏菜单的实现
登录注册页面使用独立的 Layout（不包含 DefaultLayout 的侧栏和头部），通过路由 meta 配置：
definePage({
meta: {
hideMenu: true,
},
})
typescript
在 App.vue 中根据 meta.hideMenu 决定渲染哪个 Layout：
<template>
<DefaultLayout v-if="!route.meta.hideMenu">
<RouterView />
</DefaultLayout>
<RouterView v-else />
</template>
vue
表单数据结构
interface LoginForm {
username: string
password: string
remember: boolean
}
interface RegisterForm {
username: string
email: string
password: string
confirmPassword: string
agree: boolean
}
typescript
LoginForm 组件封装
将登录表单封装为独立组件 LoginForm.vue，注册表单封装为 RegisterForm.vue，在登录页面中通过切换显示：
<template>
<Transition name="slide-fade" mode="out-in">
<LoginForm v-if="isLogin" @switch="isLogin = false" />
<RegisterForm v-else @switch="isLogin = true" />
</Transition>
</template>
vue
本节小结
- 需求拆解：核心功能（登录、校验）、增强功能（第三方登录、验证码）、UI 需求（响应式、背景图）。
- 隐藏菜单：通过路由
meta.hideMenu配置，登录页使用独立 Layout。 - 组件封装：LoginForm 和 RegisterForm 分别封装，通过 Transition 切换。
- 表单校验：Element Plus 的
el-form内置校验规则 + 自定义校验函数。
↑